<template>
	<view class="container">
		<!-- 校区切换组件 -->
		<view class="campus-switch">
			<picker mode="selector" :range="campusList" :value="selectedCampusIndex" @change="onCampusChange">
				<view class="picker">
					<text class="picker-label">🏫 当前校区</text>
					<view class="picker-right">
						<text class="picker-value">{{ campusList[selectedCampusIndex] }}</text>
						<uni-icons type="arrowdown" size="18" color="#666"></uni-icons>
					</view>
				</view>
			</picker>
		</view>

		<!-- 推荐模块 -->
		<view class="recommend-module">
			<view class="waterfall-flow">
				<view v-for="(item, index) in leftColumn" :key="index" class="food-item"
					@click="handleJump(item.restaurant_Id)">
					<view class="food-image">
						<image :src="item.imageUrl" mode="aspectFill"></image>
					</view>
					<view class="food-info">
						<view class="food-name">{{ item.name }}</view>
						<view class="restaurant-address">
							<uni-icons type="location" size="16"></uni-icons>
							{{ item.restaurantAddress }}
						</view>
						<view style="display: flex; align-items: center;justify-content: space-between;">
							<view class="food-price">￥{{ item.price }}</view>
							<view class="meta-info">
								<uni-icons type="star-filled" size="14" color="#FFD700"></uni-icons>
								<text class="rating">{{ item.rating }}</text>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="waterfall-flow">
				<view v-for="(item, index) in rightColumn" :key="index" class="food-item"
					@click="handleJump(item.restaurant_Id)">
					<view class="food-image">
						<image :src="item.imageUrl" mode="aspectFill"></image>
					</view>
					<view class="food-info">
						<view class="food-name">{{ item.name }}</view>
						<view class="restaurant-address">
							<uni-icons type="location" size="16"></uni-icons>
							{{ item.restaurantAddress }}
						</view>
						<view style="display: flex; align-items: center;justify-content: space-between;">
							<view class="food-price">￥{{ item.price }}</view>
							<view class="meta-info">
								<uni-icons type="star-filled" size="14" color="#FFD700"></uni-icons>
								<text class="rating">{{ item.rating }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	import {
		getCampus,
		getRecommend
	} from '../../request/api.js'

	import {
		useUserStore
	} from '../../stores/user.js'

	// 校区列表
	const campusList = ref(['校区A', '校区B', '校区C']);
	const campusListDetail = ref([]);
	// 当前选中的校区索引
	const selectedCampusIndex = ref(0);

	// 推荐餐品列表
	const recommendFoodList = ref([]);

	// 计算左右两栏的餐品数据
	const leftColumn = computed(() => {
		const left = [];
		for (let i = 0; i < recommendFoodList.value.length; i += 2) {
			left.push(recommendFoodList.value[i]);
		}
		return left;
	});

	const rightColumn = computed(() => {
		const right = [];
		for (let i = 1; i < recommendFoodList.value.length; i += 2) {
			right.push(recommendFoodList.value[i]);
		}
		return right;
	});

	// 校区切换事件处理函数
	const onCampusChange = async (e) => {
		selectedCampusIndex.value = e.detail.value;
		console.log(e.detail.value, campusListDetail.value, 'eee')
		const campusIDtemp = campusListDetail.value.find(item => item.campus_name === campusList.value[
			selectedCampusIndex.value]).campus_id
		uni.setStorageSync('campus_id', campusIDtemp)
		console.log('当前选中校区:', campusList.value[selectedCampusIndex.value]);
		// 这里可以添加根据校区切换更新推荐餐品的逻辑
		const usrStore = useUserStore()
		const recommend = await getRecommend(campusIDtemp, usrStore.userId);
		recommendFoodList.value = recommend.recommendFoodList
	};

	const handleJump = (id) => {
		uni.navigateTo({
			url: `/subpackage/restaurant/index?uid=${id}`
		})
	}

	const init = async () => {
		const usrStore = useUserStore()
		const res = await getCampus();
		console.log(res.campuses, 'campuses');
		campusList.value = res.campuses.map(item => item.campus_name)
		campusListDetail.value = res.campuses;
		const storageCampuse = uni.getStorageSync('campus_id');
		if (!storageCampuse) {
			uni.setStorageSync('campus_id', res.campuses[0].campus_id);
		}
		if (storageCampuse && res.campuses.find(item => item.campus_id !== storageCampuse)) {
			uni.setStorageSync('campus_id', res.campuses[0].campus_id);
		}

		const recommend = await getRecommend(res.campuses[0].campus_id, usrStore.userId);
		recommendFoodList.value = recommend.recommendFoodList
	}

	init()
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f5f5f5;
	}

	.campus-switch {
		margin-bottom: 30px;
		padding: 0 10px;
	}

	.picker {
		padding: 18px 20px;
		background: #fff;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
		border: 1px solid #eee;
	}

	.picker-label {
		font-size: 16px;
		color: #333;
		font-weight: 500;
	}

	.picker-right {
		display: flex;
		align-items: center;
		gap: 8px;
	}


	.picker-value {
		font-size: 15px;
		color: #FF6B6B;
		font-weight: 500;
	}

	.picker-icon {
		color: #999;
	}

	.recommend-module {
		display: flex;
		gap: 10px;
	}

	.waterfall-flow {
		width: 48%;
	}

	.food-item {
		margin-bottom: 15px;
		background: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
		transition: transform 0.2s ease;
	}

	.food-item:active {
		transform: scale(0.98);
	}

	.food-image {
		height: 180px;
		position: relative;
		overflow: hidden;
	}

	.food-image image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.food-image image:hover {
		transform: scale(1.1);
	}

	.food-info {
		padding: 15px;
	}

	.food-name {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		margin-bottom: 8px;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.restaurant-address {
		font-size: 12px;
		color: #999;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.restaurant-address uni-icons {
		margin-right: 5px;
	}

	.food-price {
		font-size: 16px;
		color: #fff;
		font-weight: 600;
		background: #FF6B6B;
		padding: 4px 12px;
		border-radius: 20px;
		display: inline-block;
	}

	.rating {
		font-size: 12px;
		color: var(--text-secondary);
		margin-left: 4px;
	}
</style>